<template>
  <div class="profile-container">
    <el-card class="profile-card">
      <div class="profile-header">
        <el-page-header :icon="null" @back="goBack" title="返回" content="个人信息"></el-page-header>
      </div>
      
      <div class="profile-content">
        <el-form :model="userInfo" label-width="80px" class="user-form">
          <div class="form-header">
            <div class="avatar-container">
              <el-avatar :size="60" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
              <el-button type="primary" link @click="changeAvatar">更换头像</el-button>
            </div>
            <div class="action-buttons">
              <el-button type="primary" link @click="goToChangePassword">
                <el-icon><Lock /></el-icon>
                修改密码
              </el-button>
            </div>
          </div>

          <el-divider></el-divider>
          
          <!-- 基本信息部分 -->
          <div class="form-section">
            <div class="form-row">
              <el-form-item label="姓名">
                <el-input v-model="userInfo.name" placeholder="请输入姓名"></el-input>
              </el-form-item>
              
              <el-form-item label="性别">
                <el-radio-group v-model="userInfo.gender">
                  <el-radio label="男">男</el-radio>
                  <el-radio label="女">女</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
            
            <div class="form-row">
              <el-form-item label="手机号码">
                <el-input v-model="userInfo.phone" placeholder="请输入手机号码"></el-input>
              </el-form-item>
              
              <el-form-item label="邮箱">
                <el-input v-model="userInfo.email" placeholder="请输入邮箱"></el-input>
              </el-form-item>
            </div>
            
            <div class="form-row">
              <el-form-item label="部门">
                <el-select v-model="userInfo.department" placeholder="请选择部门">
                  <el-option label="金融部" value="finance"></el-option>
                  <el-option label="信贷部" value="credit"></el-option>
                  <el-option label="风控部" value="risk"></el-option>
                  <el-option label="客服部" value="service"></el-option>
                </el-select>
              </el-form-item>
              
              <el-form-item label="职位">
                <el-input v-model="userInfo.position" placeholder="请输入职位"></el-input>
              </el-form-item>
            </div>
            
            <div class="form-row">
              <el-form-item label="入职日期">
                <el-date-picker v-model="userInfo.joinDate" type="date" placeholder="选择日期"></el-date-picker>
              </el-form-item>
            </div>
          </div>

          <!-- 底部按钮组 -->
          <div class="button-group">
            <el-button type="primary" @click="saveUserInfo">保存</el-button>
            <el-button @click="resetForm">重置</el-button>
          </div>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import { Lock } from '@element-plus/icons-vue'

export default {
  name: 'Profile',
  components: {
    Lock
  },
  data() {
    return {
      userInfo: {
        name: '张三',
        gender: '男',
        phone: '13800138000',
        email: 'zhangsan@example.com',
        department: 'finance',
        position: '金融分析师',
        joinDate: new Date('2020-01-01')
      }
    };
  },
  methods: {
    goBack() {
      this.$router.push('/');
    },
    goToChangePassword() {
      this.$router.push('/change-password');
    },
    changeAvatar() {
      // TODO: 实现更换头像的逻辑
    },
    saveUserInfo() {
      this.$message({
        message: '个人信息保存成功！',
        type: 'success'
      });
    },
    resetForm() {
      this.userInfo = {
        name: '张三',
        gender: '男',
        phone: '13800138000',
        email: 'zhangsan@example.com',
        department: 'finance',
        position: '金融分析师',
        joinDate: new Date('2020-01-01')
      };
      this.$message({
        message: '表单已重置',
        type: 'info'
      });
    }
  }
};
</script>

<style scoped>
.profile-container {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  background-color: #f5f7fa;
  display: flex;
  flex-direction: column;
}

.profile-card {
  flex: 1;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
}

.profile-header {
  padding: 16px 20px;
  border-bottom: 1px solid #ebeef5;
  background-color: #fff;
}

.profile-content {
  flex: 1;
  padding: 20px 40px;
  background-color: #fff;
  overflow-y: auto;
}

.form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.avatar-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.action-buttons {
  display: flex;
  gap: 20px;
}

.user-form {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.form-section {
  margin-bottom: 30px;
}

.form-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.form-row .el-form-item {
  flex: 1;
  margin: 0;
  min-width: 300px;
}

.button-group {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}

.el-divider {
  margin: 20px 0;
}

/* 响应式布局 */
@media screen and (max-width: 1400px) {
  .user-form {
    max-width: 100%;
  }
  
  .profile-content {
    padding: 20px;
  }
}

@media screen and (max-width: 992px) {
  .form-row {
    flex-wrap: wrap;
  }
  
  .form-row .el-form-item {
    min-width: calc(50% - 10px);
  }
}

@media screen and (max-width: 768px) {
  .form-row {
    flex-direction: column;
  }
  
  .form-row .el-form-item {
    width: 100%;
    min-width: 100%;
  }
  
  .profile-content {
    padding: 15px;
  }
}
</style> 